<template>
    <div class="login">
        <div class="bg"></div>
        <transition name="el-fade-in-linear">
            <div class="spin-container" v-if="loading">
              <div class="spin1">
                <div class="spin2">
                </div>
                  <div class="spin3">
                </div>
              </div>
            </div>
        </transition>
        <!-- 登录 -->
        <transition name="el-zoom-in-center">
        <div class="center" v-if="!isShow">
            <el-form ref="form" :model="form" class="container" :rules="rules">
                <el-form-item>
                  <div class="avatar">
                    <span class="disline bor_left"><img src="../assets/logo.png"></span>
                    <h3 class="disline title_text">商户管理系统</h3>
                    <span class="disline bor_right"></span>
                  </div>
                  <div class="underline"></div>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input v-model="form.username" maxlength="11" placeholder="请输入登录名..." prefix-icon="myicon myicon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码..." prefix-icon="myicon myicon-key"></el-input>
                </el-form-item>
                <el-form-item prop="validCode">
                  <el-col :span="11">
                      <el-input v-model="form.validCode" placeholder="请输入验证码..."></el-input>
                  </el-col> 
                  <el-col :span="6" style="margin:0 5px;">
                      <div class="verify-box" style="margin:0 5px -10px 5px;width: 100%;height: 30px;display:inline-block;" >
                          <Sidentify :identifyCode="identifyCode"></Sidentify>
                      </div>
                  </el-col> 
                  <el-button type="primary" @click="refreshCode">看不清</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button class="login-btn" @click="loginSubmit('form')">登录</el-button>
                </el-form-item>
                <!-- <el-form-item>
                    <el-button class="regist-btn" @click="goRegist">注册</el-button>
                </el-form-item> -->
                <h5 style="font-size:14px;color: #555;text-align:center;">
                  <span>Copyright 2018 (c). All Rights Reserved.</span>
                </h5>
            </el-form>
            <p class="tpis">
              系统仅支持Edge、Google Chrome、Mozilla Firefox以及其它主流的浏览器，如您的浏览器无法使用本系统，请更换其它浏览器！
            </p>
        </div>
        </transition>
        <!-- 登录 -->
        <!-- 注册 -->
        <transition name="el-zoom-in-center">
        <div class="center regist" v-if="isShow">
            <el-form ref="registform" :model="registform" class="container" :rules="registrules" label-width="140px">
                <!-- <el-form-item>
                  <div class="avatar">
                    <span class="disline bor_left"><img src="../assets/logo.png"></span>
                    <h3 class="disline title_text">商户管理系统</h3>
                    <span class="disline bor_right"></span>
                  </div>
                  <div class="underline"></div>
                  <h2 style="text-align:center;">申请商户</h2>    
                </el-form-item> -->
                <h2 style="text-align:center;"><span style="color: rgb(32, 168, 216);
                cursor: pointer;display: inline-block;float: left;" @click="backLogin"><<返回登录</span style="font-weight:bold;">申请商户</h2> 
                <el-form-item label="名称（必填）:" prop="nickname">
                    <el-input type="text" v-model="registform.nickname" placeholder="请输入名称..."></el-input>
                </el-form-item>
                <el-form-item label="证件类型（必填）:" prop="role">
                  <el-select v-model="registform.role" placeholder="身份证" style="width: 210px;" clearable >
                    <el-option label="护照" value="护照" style="width:210px"></el-option>
                    <el-option label="身份证" value="身份证" style="width:210px"></el-option>
                    <el-option label="驾驶证" value="驾驶证" style="width:210px"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="证件号码（必填）:" prop="certificateNo">
                    <el-input type="text" v-model="registform.certificateNo" placeholder="请输入证件号码..."></el-input>
                </el-form-item>
                <el-form-item label="地址（必填）:" prop="address">
                    <el-input type="text" v-model="registform.address" placeholder="请输入地址..."></el-input>
                </el-form-item>
                <el-form-item label="手机号码（必填）:" style="margin-bottom: 0px;">
                  <el-col :span="10">
                      <el-form-item  prop="mobeliNumberRegion">
                            <el-select v-model="registform.mobeliNumberRegion" clearable  placeholder="+86-中国" style="width:105px">
                              <el-option label="+86-中国" value="+86-中国" style="width:105px" ></el-option>
                              <el-option label="+01-美国" value="+01-美国" style="width:105px"></el-option>
                            </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="14">
                      <el-form-item  prop="mobeliNumber">
                            <el-input style="width:170px" type="tel" v-model="registform.mobeliNumber" maxlength="11" placeholder="请输入您的手机号..." ></el-input>
                      </el-form-item>
                  </el-col>
                </el-form-item>
                 <!-- <el-form-item label="图形验证码（必填）:" prop="validCode"><br>
                  <el-col :span="11">
                      <el-input v-model="registform.validCode" maxlength="4" placeholder="请输入验证码..." ></el-input>
                  </el-col> 
                  <el-col :span="6" style="margin:0 5px;">
                      <div class="verify-box" style="margin:0 5px -10px 5px;width: 100%;height: 30px;display:inline-block;" >
                          <Sidentify :identifyCode="registidentifyCode"></Sidentify>
                      </div>
                  </el-col> 
                  <el-button type="primary" @click="refreshCode">看不清</el-button>
                </el-form-item> -->
                <el-form-item label="验证码（必填）:" prop="smscode">
                    <el-input v-model="registform.smscode" placeholder="请输入验证码..." maxlength="6" style="width:245px"></el-input>
                    <el-button type="primary" @click="refreshSmsCode" style="padding:8px 12px;">{{getcode}}</el-button>
                </el-form-item>
                <el-form-item label="邮箱（必填）:" prop="email">
                    <el-input v-model="registform.email" placeholder="请输入邮箱..." ></el-input>
                </el-form-item>
                <el-form-item label="密码（必填）:" prop="password">
                    <el-input type="password" v-model="registform.password" placeholder="请输入密码..."></el-input>
                </el-form-item>
                <el-form-item label="确认密码（必填）:" prop="passwordN">
                    <el-input type="password" v-model="registform.passwordN" placeholder="请输入密码..."></el-input>
                </el-form-item>
                <el-form-item label="公司名称（必填）:" prop="companyname">
                    <el-input type="text" v-model="registform.companyname" placeholder="请输入公司名称..."></el-input>
                </el-form-item>
                <el-form-item label="邀请码:" prop="invintcode">
                    <el-input type="text" v-model="registform.invintcode" placeholder="请输入邀请码..."></el-input>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-button class="login-btn" @click="registSubmit('registform')" :loading="isSubmit">提交</el-button>
                </el-form-item>
                <!-- <h5 style="font-size:14px;color: #555;text-align:center;padding-bottom:30px;">
                  <span>Copyright 2018 (c). All Rights Reserved.</span>
                </h5> -->
            </el-form>
        </div>
        </transition>
         <!-- 注册 -->
    </div>
</template>
<script>
import DataUtil from "../common/dataUtil";
import Sidentify from "../components/identify.vue";
import { checkUser ,getSmscode ,regist} from "@/api/index.js";

  var validPhone=(rule, value,callback)=>{
      if (!value){
          callback(new Error('请输入电话号码'))
      }else  if (!DataUtil.isMobile(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else {
          callback()
      }
  }
export default {
  data() {
    return {
      loading : true,
      isShow : false,
      isSubmit : false,
      identifyCodes: "1234567890",
      identifyCode: "",
      registidentifyCode : '',
      form: {
        username: "",
        password: "",
        validCode : '',
      },
      registform:{
        role : '',
        nickname : '',
        companyname: "",
        smscode : '',
        password: "",
        passwordN: "",
        certificateNo : '',
        // validCode : '',
        mobeliNumber : '',
        mobeliNumberRegion : '',
        email : '',
        invintcode : '',
        address : '',
      },
      rules: {
        username: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        validCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      registrules: {
        role : [{ required: true, message: "请选择证件类型", trigger: "change" }],
        nickname : [{ required: true, message: "请输入名称", trigger: "blur" }],
        smscode : [{ required: true, message: "请选输入短信验证码", trigger: "blur" }],
        companyname: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        passwordN: [{ required: true, message: "请确认新密码", trigger: "blur" }],
        certificateNo : [{ required: true, message: "请输入证件号码", trigger: "blur" }],
        // validCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        mobeliNumber : [{ required: true, validator: validPhone, trigger: "blur" }],
        email : [{ required: true, message: "请输入邮箱", trigger: "blur" },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
        companyname : [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        address : [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
      getcode : '获取',
    };
  },
  methods: {
    /////////刷新验证码start////////////
    refreshCode(){
       this.identifyCode = '';
       this.registidentifyCode = '';
       this.makeCode(this.identifyCodes,4);

    },
    makeCode(o,l){
      for(let i=0;i<l;i++){
         this.identifyCode += this.identifyCodes[
            this.randomNum(0,this.identifyCodes.length)
         ];
          this.registidentifyCode += this.identifyCodes[
            this.randomNum(0,this.identifyCodes.length)
         ];
      }
    },
    randomNum(min,max){
       return Math.floor(Math.random()*(max-min + min));
    },
     /////////刷新验证码end////////////
      /////////登录start////////////
    loginSubmit(formName) {
      this.$refs[formName].validate(valide => {
        if(this.form.validCode == this.identifyCode){
            //只有校验通过之后才执行函数
            if (valide) {
              const formData = new FormData();
                    formData.append("phone" , this.form.username);
                    formData.append("password" , this.form.password);
              checkUser(formData).then(
                response => {
                  //如果登录成功要跳转到首页，将token保存到本地 localStorage
                  //如果有数据并且code=1时 执行dataUtil.js  封装的函数，将用户的数据保存在localStorage里
                  if ('01001' == response.status && response.data) {
                    DataUtil.sid(response.data.token);
                    DataUtil.userInfo(JSON.stringify(response.data));
                    //登录成功  跳转到home页面
                    this.$router.push("/home");
                    this.$message({
                        message: '登录成功！',
                        type: 'success'
                    });
                    
                  } else {
                    this.refreshCode();
                    this.$message.error(response.msg);
                    this.form.username = '';
                    this.form.password = '';
                    this.form.validCode = '';
                    
                  }
                }, response => {
                  this.refreshCode();
                  this.logining = false;
                  
                }
              );
            } else {
                for(let key in this.form){
                  if(!this.form.username){
                      this.$message.error("登录名,不能为空！");
                  }else if(!this.form.password){
                      this.$message.error("密码,不能为空！");
                  }else if(!this.form.validCode ){
                      this.$message.error("验证码,不能为空！");
                  }
                }
            }
        }else{
            this.$message.error("验证码输入有误！");
            this.refreshCode();
        }
      });
    },
    /////////登录end////////////
   /////////注册start////////////
    goRegist(){
        this.isShow = true;
    },
    backLogin(){
        this.isShow = false;
    },
    /////////获取短信验证码
    refreshSmsCode(){
        if (this.registform.mobeliNumber) {
          const formData = new FormData();
            formData.append("phoneNumber" , this.registform.mobeliNumber);
          getSmscode(formData).then(
            response => {
              if ('01001' == response.status) {
                this.showWaitTips();
                this.$message({
                    message: '短信正在发送中...',
                    type: 'success'
                });
              } else {
                this.$message.error(response.msg);
                this.registform.mobeliNumber = '';
                
              }
            }, response => {
              
            }
          );
        } else {
          this.$message.error("输入手机号不能为空！");
        }
    },
    ///////提交注册
    registSubmit(formName){
      this.isSubmit = true;
      this.$refs[formName].validate(valide => {
        //只有校验通过之后才执行函数
            if (valide) {
              const formData = new FormData();
              if(this.registform.password == this.registform.passwordN){
                formData.append("code" , this.registform.smscode);
                formData.append("phone" , this.registform.mobeliNumber);
                formData.append("companyName" , this.registform.companyname);
                formData.append("nickname" , this.registform.nickname);
                formData.append("password" , this.registform.password);
                formData.append("address" , this.registform.address);
                formData.append("email" , this.registform.email);
                formData.append("certificateType" , this.registform.role);
                formData.append("certificateNo" , this.registform.certificateNo);
              regist(formData).then(
                response => {
                  //如果登录成功要跳转到首页，将token保存到本地 localStorage
                  //如果有数据并且code=1时 执行dataUtil.js  封装的函数，将用户的数据保存在localStorage里
                if ('01001' == response.status && response.data) {
                  this.isShow = false;
                  this.isSubmit = false;
                  this.$message({
                      message: '注册成功！',
                      type: 'success'
                  });
                } else {
                  this.$message.error(response.msg);
                  this.isSubmit = false;
                }
              }, response => {
                this.refreshCode();
                this.isSubmit = false;
              });
            }else{
              this.$message.error("输入密码不一致！");
              this.isSubmit = false;
            }
          } else {
            this.$message.error("输入不能为空！");
            this.isSubmit = false;
          }
      });       
    },
    ////倒计时
    showWaitTips() {
        let _this=this;
        let s = 60;
          _this.getcode = "已发送(" + s + ")";
          let sv = setInterval(function () {
              if (s > 1) {
                  s--;
                  _this.getcode = "已发送(" + s + ")";
              } else {
                  _this.getcode = "重新获取";
                  clearInterval(sv);
              }
          }, 1000);
    },
    /////////注册end////////////
     pageInit() {
      if (DataUtil.account()) {
        this.form.username = DataUtil.account();
      }
    },
    openFullScreen() {
        setTimeout(() => {
          this.loading = false;
        }, 2000);
    }
  },
  created() {},
  mounted: function() {
    this.refreshCode();
    this.pageInit();
    this.openFullScreen();
  },
   components: {
    Sidentify
  }
};
</script>
<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #108fd5;
    // background: url(../assets/meinv11.jpg) no-repeat;
    // background-position: 50% 50%;
    // background-size: cover;
    // transition: all 10s linear;；/
    -webkit-animation-name: scaleDraw; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: 1; /*动画播放的次数*/
    -webkit-animation-duration: 13s; /*动画所花费的时间*/
  }
  @keyframes scaleDraw {
    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
      transform: scale(1.2); /*开始为原始大小*/
    }
    100% {
      transform: scale(1); /*放大1.1倍*/
    }
  }
  .left15 {
    width: 400px;
    height: 400px;
    background-color: rgba(247, 248, 248, 0.719);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -200px;
    transform: rotate(5deg);
    -ms-transform: rotate(5deg); /* IE 9 */
    -moz-transform: rotate(5deg); /* Firefox */
    -webkit-transform: rotate(5deg); /* Safari 和 Chrome */
    -o-transform: rotate(5deg); /* Opera */
    transform-origin: center center;
  }
  .right15 {
    width: 400px;
    height: 400px;
    background-color: rgba(247, 248, 248, 0.719);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -200px;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg); /* IE 9 */
    -moz-transform: rotate(-5deg); /* Firefox */
    -webkit-transform: rotate(-5deg); /* Safari 和 Chrome */
    -o-transform: rotate(-5deg); /* Opera */
    transform-origin: center center;
  }
  .center {
    width: 400px;
    height: 480px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 8%;
    margin-top: 0;
    margin-left: -200px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 15px #131417;
    box-shadow: 0 0 15px #fff;
    p{
        width: 380px;
        text-align: center;
        font-size: 13px;
        margin-top: 8px;
        color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        filter: alpha(opacity=8);
        -moz-opacity: .8;
        opacity: .8;
    }
    .container {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 40px 60px;
      .avatar {
        width: 95%;
        height: 60px;
        text-align: center;
        .disline {
          display: inline-block;
        }
        .bor_left {
          background-color: transparent;
          vertical-align: middle;
          margin-bottom: 10px;
          padding-left: 10px;
        }
        .bor_left img{
        width: 40px;
        margin: 0 5px -15px 15px;
        background-color: #e4e4e4;
        border-radius: 50%;
        box-shadow: 1px 2px 6px rgba(0,0,0,.03);
      }
      .bor_left img:hover{
          transform: rotateY(-360deg);
          transition-property: all;
          transition-duration: 0.5s;
          transition-timing-function: ease-in-out;
          transition-delay: initial;
      }
        .bor_right {
          width: 80px;
          height: 2.3px;
          vertical-align: middle;
        }
        .title_text {
          font-size: 22px;
          font-weight: 600;
          color: #000;;
        }
      }
      .underline{
        width:100%;
        height: 1px;
        background: #ccc;
      }
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #fff;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner {
        // background-color: rgb(102, 191, 218);
        // border-color: rgb(102, 191, 218);
      }
      .el-checkbox__inner:hover {
        border-color: rgb(102, 191, 218);
      }
      .login-btn {
        width: 100%;
        background-color: #20a8d8;
        color: #fff;
        border: 0;
        padding: 10px 0;
      }
      .login-btn:hover{
        color: #fff;
        background-color: #1985ac;
        border-color: #187fa3;
      }
      .regist-btn{
        width: 100%;
        color: #fff;
        border: 0;
        padding: 10px 0;
        background-color: rgb(245, 108, 108);
      }
      .regist-btn:hover{
        background-color: rgb(241, 57, 57);
      }
      .regist-btn:focus{
        background-color: rgb(245, 108, 108);
      }
    }
  }
  .regist{
    width: 570px;
    height: 100%;
    overflow-y: scroll;
    top: 0;
    left:40%;
  }
  .regist .container {
    padding: 5px 60px 40px;
}
  .regist::-webkit-scrollbar{
     display:none;
  }
}
    
</style>

